<template>
  <div :style="{height:'100vh',overflowX:'hidden'}" class="index">
    <v-header :items="items"></v-header>
    <Breadcrumb :home="bread.home" :model="bread.items"/>
    <Splitter class="p-mt-5 p-mb-5" style="height: 400px">
      <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
        <Chart :data="c1" :height="300" type="doughnut"/>
      </SplitterPanel>
      <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
        <Chart :data="c2" :height="300" :width="500" type="bar"/>
      </SplitterPanel>
    </Splitter>

    <div class="p-grid p-mt-3">
      <Panel @toggle="toggle(item.id)"  v-for="item in goodsList" :collapsed="true" :toggleable="true" class=" p-col-3">
        <template #header>
          <div class="header">
            <img class="pic" :src="item.pic">
            {{item.commodityName}}
          </div>
        </template>
        <template #icons>
          <button class="p-panel-header-icon p-mr-2" @click="toDetail(item.id)">
            <span class="pi pi-cog"></span>
          </button>
        </template>
        {{item.info}}
      </Panel>
    </div>
    <ScrollTop :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" target="parent"/>
  </div>
  <Dialog :style="{width: '40vw'}" :visible="showCreateGoods" header="新增商品信息" :closable="false" :modal="true">
    <div class="row">
      <div class="p-inputgroup">
      <span class="p-float-label">
        <InputText id="name" v-model="goods.commodityName"/>
          <label for="name">商品名称</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
      <span class="p-float-label">
        <InputText id="info" v-model="goods.info"/>
          <label for="info">商品描述</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
      <span class="p-float-label">
        <InputNumber id="max" v-model="goods.upperLimit"/>
          <label for="max">商品最大上限</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
      <span class="p-float-label">
        <InputNumber id="min" v-model="goods.lowerLimit"/>
          <label for="min">商品最小下限</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
      <span class="p-float-label">
        <InputNumber id="time" v-model="goods.shelfLife"/>
          <label for="time">商品保质期</label>
        </span>
      </div>
    </div>
    <div class="row">
      <div class="p-inputgroup">
      <span class="p-float-label">
        <InputText id="address" v-model="goods.location"/>
          <label for="address">商品产地</label>
        </span>
      </div>
    </div>
    <div class="row">
      <Button v-if="!goods.pic" class="p-button-info p-button-text" label="选择商品图片" @click="upload"/>
      <img class="avatar" v-else :src="goods.pic"/>
    </div>
    <template #footer>
      <Button class="p-button-text" icon="pi pi-times" label="取消" @click="showCreateGoods=false"/>
      <Button autofocus icon="pi pi-check" label="确定" @click="toCreate"/>
    </template>
  </Dialog>
</template>
<script setup>
import service from "@/request.js"
import S from "@/store"
import {getDays, setImg} from "@/util.js"
import {useConfirm} from "primevue/useconfirm"
import {ref, onMounted} from 'vue'
import R from '@/router'
import vHeader from '@/components/header'
import {useToast} from "primevue/usetoast"

let showCreateGoods = ref (false)
let goods = ref ({})
let commodityName = ref (''), goodsList = ref ([])

const Toast = useToast (), Confirm = useConfirm ()

const items = [
  {
    label: '新增商品信息',
    icon: 'pi pi-fw pi-plus',
    command () {
      showCreateGoods.value = true
    }
  }
]
const c1 = ref({
  labels: ['赚', '平', '亏'],
  datasets: [{
    data: [0, 0, 0],
    backgroundColor: [
      '#42A5F5',
      '#66BB6A',
      '#FFA726'
    ],
    hoverBackgroundColor: [
      '#64B5F6',
      '#81C784',
      '#FFB74D'
    ]
  }]
})
const c2 = ref({
  labels: getDays(),
  datasets: [{
    label: '清库',
    backgroundColor: '#db2a94',
    data: [0, 0, 0, 0, 0, 0, 1]
  },
    {
      label: '入库',
      backgroundColor: '#42A5F5',
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      label: '出库',
      backgroundColor: '#FFA726',
      data: [0, 0, 0, 0, 0, 0, 0]
    }]
})
const bread = {
  home: {icon: 'pi pi-home', to: '/index'},
  items: [
    {label: '首页', to: '/index'}
  ]
}


let toDetail = (id) => R.push ('/detail?id='+id)
const upload = () => setImg ((url) => goods.value.pic = url)


function toCreate () {
  service.post ('commodity/', goods.value).then (r => {
    Toast.add ({severity: 'success', summary: '新增成功', life: 3000})
    showCreateGoods.value = false
    getGoodsList ()
    goods.value={}
  }).catch (e => Toast.add ({severity: 'error', summary: e, life: 3000}))
}

function toggle (id) {
}

function getGoodsList () {
  service.get ('commodity/list?commodityName=' + commodityName.value).then (r => {
    goodsList.value = r
    S.commit('setLoading', false)
  }).catch (e => Toast.add ({severity: 'error', summary: e, life: 3000}))
  Promise.all([
    service.get('commodity/graph/price-count'),
    service.get('commodity/graph/date-commodity-ioc'),
  ]).then(arr => [ _2, _3].forEach((v, j) => v(arr[j])))
  // 环图
  let _2 = ({name, value}) => {
    c1.value.labels = name
    c1.value.datasets[0].data = value
  }
  //柱图
  let _3 = (data) => {
    c2.value.datasets[0].data = data.CLEAN
    c2.value.datasets[1].data = data.INPUT
    c2.value.datasets[2].data = data.OUTPUT
  }
}

onMounted (() => getGoodsList ())
</script>

<style lang="stylus">

.avatar
  width 100px
  border-radius 10%
  overflow hidden

.row
  margin 30px 40px

.pic
  width 60px
  border-radius 5px
  vertical-align middle
  margin-right 10px

</style>
